<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入Bootstrap 5稳定版的CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Bootstrap 5稳定版的JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

  <div id="app" class="container mt-5">


    <div class="row">
      <!-- 表格区域 -->
      <div class="col-md-9 ">


        <table class="table table-light  table-bordered text-center">
          <thead class="thead-light">
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>分数</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-if="dataList.length > 0">
            <tr v-for="(item, index) in dataList" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td :class="{ ac: item.score < 60 }">{{ item.score }}</td>
              <td>
                <a @click.prevent="deleteItem(item.id)" class="btn btn-danger" href="#">删除</a>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="4" class="text-center">暂无数据</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td>总分: {{ totalScore }} 总人数: {{ dataList.length }}</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <!-- 表单区域 -->
      <div class="col-md-3">
        <div class="card p-3">
          <!-- 科目输入框 -->
          <div class="d-flex mb-3">
            <label for="" class="form-label mr-2">科目</label>
            <input type="text" placeholder="请输入科目名称" class="form-control" v-model.trim="subject">
          </div>
          <!-- 分数输入框 -->
          <div class="d-flex mb-3">
            <label for="" class="form-label mr-2">分数</label>
            <input type="number" placeholder="请输入分数" class="form-control" v-model.number="score">
          </div>
          <!-- 添加按钮 -->
          <div class="d-flex justify-content-center">
            <button class="btn btn-sm btn-primary" @click="addScore">添加</button>
          </div>
        </div>
      </div>
    </div>





  </div>

</body>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      subject: "",
      score: "",

      dataList: [{ id: 1, name: '张三', score: 80 }, { id: 2, name: '李四', score: 90 }, { id: 3, name: '王五', score: 60 }]
    },
    methods: {
      deleteItem: function (id) {
        console.log(id)
        this.dataList = this.dataList.filter(item => item.id !== id)
      }
      ,
      addScore: function () {
        var name = prompt("请输入姓名")
        var score = prompt("请输入分数")
        if (name && score) {
          var id = this.dataList.length + 1
          var item = {
            id: id,
            name: name,
            score: score
          }
          this.dataList.push(item)
          this.subject = ""
          this.score = ""
        }
      }

    }
    ,
    computed: {
      totalScore () {
        var total = 0
        this.dataList.forEach(item => {
          total += parseInt(item.score)
        })
        return total
      }
    },
  })
</script>

<style>
  .ac {
    color: red;
    background-color: yellow;
  }
</style>

</html>